<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/17
  Time: 14:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background:url("images/1612843817698.jpg") no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        #loginDiv {
            width: 37%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background-color: rgba(75, 81, 95, 0.3);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }

        #name_trip {
            margin-left: 50px;
            color: red;
        }

        p {
            margin-top: 30px;
            margin-left: 20px;
            color: azure;
        }

        input {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }

        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
        #test-s1{
            width: 15px;
            height: 15px;
            font-size: 16px;
        }
        /*#img{
            width: 50px;
            height: 40px;
        }*/

    </style>
</head>

<body>
<div id="loginDiv">
    <form action="<%=request.getContextPath()%>/login" id="loginform" method="post">
        <h1 style="text-align: center;color: aliceblue;">LOGIN  IN</h1>
        <p>User Name:<input id="userName" name="userName" type="text"><label id="name_trip"></label></p>

        <p>Password:  <input id="password" name="password" type="password"><label id="password_trip"></label></p>
        <p>验 证 码：<input id="login-validate" name="validate" type="text" />
        <img id="img" src="validateCode" onclick="changeImg()"/>

        </p>
        </tr>
        <p><input type="radio" name = "test" class = "test" id = "test-s1" value = "s1" >7天自动登录</p>



        <div style="text-align: center;margin-top: 30px;">
             <input type="submit" class="button" value="登录" onclick = login2()>
            <input type="reset" class="button" value="重置">

        </div>

        <p  align="center"><a href="register.jsp">去注册。</a></p>
    </form>

</div>

</body>
</html>
<script src="js/jquery-2.1.0.min.js"></script>

<script type="text/javascript">

    function changeImg() {
        document.getElementById("img").src="validateCode?n="+Math.random(); //随机生成验证码
    }

    window.onload = function () {

        $.ajax({
            type: "post",
            url: "<%=request.getContextPath()%>/login",
            data: [],
            success: function (data) {
                console.log(data);
                if (data == "fail") {
                    console.log("登录失败")
                } else {
                    window.location.href = "./my_home.jsp"
                }
            }
        });
    }
</script>
